<template>
  <div class="membersetup-contianter fillcontain">
    <breadcrumb></breadcrumb>
    <div class="content">
      <div class="container">
        <el-main>
          <el-form>
            <el-form-item label="企业热线：" label-width="120px">
              <el-input v-model.number="phone" style="width：300px"></el-input>
            </el-form-item>
            <el-form-item label="企业邮箱：" label-width="120px">
              <el-input v-model="email" style="width：300px"></el-input>
            </el-form-item>
            <el-form-item label="企业QQ：" label-width="120px">
              <el-input v-model.number="qq" style="width：300px"></el-input>
            </el-form-item>
            <el-form-item label="企业微信：" label-width="120px">
              <el-input v-model="weChat" style="width：300px"></el-input>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer>
          <el-button type="primary" @click="modifyOrder">确定</el-button>
          <el-button style="color:#409EFF " @click="get_list()">取消</el-button>
        </el-footer>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "../../components/breadcrumb";
export default {
  components: { breadcrumb },
  data() {
    return {
      phone: "",
      email: "",
      qq: "",
      weChat: "",
      qqId: "",
      weChatId: "",
      emailId: "",
      phoneId: ""
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    get_list() {
      this.$axios.post("/web_customer/select_customer").then(result => {
        if (result.data.status == 0) {
          let data = result.data.data;
          //console.log(data);

          this.phone = data[0].confValue;
          this.phoneId = data[0].id;
          this.email = data[1].confValue;
          this.emailId = data[1].id;
          this.qq = data[2].confValue;
          this.qqId = data[2].id;
          this.weChat = data[3].confValue;
          this.weChatId = data[3].id;
        }
      });
    },

    modifyOrder() {
      if (!this.phone || !this.email || !this.qq || !this.weChat) {
        this.get_list();
        return this.$message({
          type: "warning",
          message: "企业热线，qq，微信，邮箱不能为空"
        });
      }
      var data;
      if (this.phoneId && this.emailId && this.qqId && this.weChatId) {
        data =
          "phone=" +
          this.phone +
          "&email=" +
          this.email +
          "&qq=" +
          this.qq +
          "&weChat=" +
          this.weChat +
          "&phoneId=" +
          this.phoneId +
          "&emailId=" +
          this.emailId +
          "&qqId=" +
          this.qqId +
          "&weChatId=" +
          this.weChatId;
      } else {
        data =
          "phone=" +
          this.phone +
          "&email=" +
          this.email +
          "&qq=" +
          this.qq +
          "&weChat=" +
          this.weChat;
      }
      this.$axios
        .post("/web_customer/saveOrUpdate_customer", data)
        .then(result => {
          if (result.data.status == 0) {
            if (result.data.data == true) {
              this.get_list();
              return this.$message({
                type: "success",
                message: "操作成功"
              });
            } else {
              return this.$message({
                type: "warning",
                message: "操作失败"
              });
            }
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.membersetup-contianter {
  position: relative;
  .el-form-item__label {
    text-align: left;
  }
  // .el-input__inner {
  //   line-height: 30px;
  //   height: 30px;
  //   width: 300px !important;
  // }
  .breadcrumb-container {
    position: absolute;
    width: 100%;
  }

  .content {
    .el-card.is-always-shadow {
      box-shadow: none;
    }
    background-color: #eff3f6;
    padding: 60px 20px 20px;
    height: 100%;
    box-sizing: border-box;
    .container {
      background-color: #fff;
      height: 100%;
      .el-main {
        background-color: #fff;
        .el-input {
          width: 300px;
          
        }
      }
      .el-footer {
        padding-left: 300px;
        button {
          margin: 0 40px;
          height: 30px;
          width: 70px;
          padding: 0;
        }
      }
    }
  }
}
</style>

